<template>
  <div>
    <Row style="padding-top: 16px;text-align: left" align="middle" type="flex" class="y_query_right">
      <DatePicker type="date" placeholder="Select date" style="width: 150px" v-model="tParam.searchParams.startDate"></DatePicker>&nbsp;-&nbsp;
      <DatePicker type="date" placeholder="Select date" style="width: 150px" v-model="tParam.searchParams.endDate"></DatePicker>
      <Button type="primary" style="margin-left: 16px" icon="md-search" @click="search" class="y_condition">查询</Button>
      <Button type="primary" style="margin-left: 16px" icon="md-download" @click="exportAnalysis" class="y_condition">导出</Button>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border ref="userAnalysisList" :columns="userAnalysisTable" :data="userAnalysisList"
           class="table_css" no-data-text="暂无数据" ></Table>-->
    <List border class="data-list">
      <template v-if="userAnalysisList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in userAnalysisList" :key="index" class="list-item">
          <div class="item-top">
            <KeyValueView title="日期" :value="$tiyBJTime(item.date)"></KeyValueView>
            <KeyValueView title="登录次数" :value="item.loginNumber"></KeyValueView>
            <KeyValueView title="登录用户数" :value="item.loginUser"></KeyValueView>
            <KeyValueView title="加购次数" :value="item.addCartNumber"></KeyValueView>
            <KeyValueView title="加购用户数" :value="item.addCartUser"></KeyValueView>
            <KeyValueView title="购物车金额" :value="item.cartAmount"></KeyValueView>
            <KeyValueView title="下单笔数" :value="item.orderNumber"></KeyValueView>
            <KeyValueView title="下单用户数" :value="item.orderUser"></KeyValueView>
            <KeyValueView title="转换率" :value="item.p"></KeyValueView>
            <KeyValueView title="当日销售额" :value="item.sumOrder"></KeyValueView>
          </div>
        </ListItem>
      </template>
    </List>
    <div style="float: right; margin-top: 20px;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts=[40,60,80,120]
            show-sizer show-elevator/>
    </div>

  </div>

</template>

<!--javascript 代码-->
<script>
    import ICol from "../../../node_modules/view-design/src/components/grid/col";
    import tiyData from "./js/userAnalysis/userAnalysis_data";
    import {
        init,
        searchService,
        exportAnalysis
    } from "./js/userAnalysis/userAnalysis_funs";
    import KeyValueView from "../widgets/KeyValueView";

    export default {
        components: {KeyValueView, ICol},
        data(){
            return {
                tRole: {//权限
                },
                tParam : tiyData.tParams,
                tPage : tiyData.tPage,
                userAnalysisList : tiyData.tData.userAnalysisList,
                userAnalysisTable :tiyData.userAnalysisTable(this),
            }
        },
        computed: {
        },
        methods: {
          search(){
            searchService(this,tiyData);
          },
          changePage(page){
            tiyData.tPage.currentPage = page;
            searchService(this, tiyData);
          },
          sizeChange(p){
            tiyData.tPage.stepNumber = p;
            searchService(this, tiyData);
          },
          exportAnalysis(){
            if(!this.tParam.searchParams.startDate && !this.tParam.searchParams.endDate){
              this.$Modal.error({
                  title: "error",
                  content: "先选择需要导出的日期区间！",
                  width:500,
                  onOk : function(){
                  }
              });
            }
            exportAnalysis(this,tiyData);
          }
        },
        created(){
            init(tiyData);
        }
    }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }
.data-list {
  margin: 1rem 0rem;
  line-height: 25px;
  .list-item {
    .flex-colum-wrap;
    justify-items: left;
    align-items: start;
    .item-checkbox {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      vertical-align: top;
    }
    .item-img {
      width: 130px;
      text-align: center;
      display: inline-block;
    }
    .item-top{
      width: 100%;
      margin-bottom: 5px;
      .flex-row-wrap;
      justify-content: left;
    }
    .item-content {
      margin-bottom: 35px;
      text-align: left;
    }
    .item-bottom{
      //position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      //padding: 0 1rem 0.5rem 0;
      text-align: right;
      button {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
